<template>
  <div id="projectWrapper">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">项目定制</el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :lg="24">
        <data-choose dateType="month" :isShowGroup="false" :isReport="false"></data-choose>
      </el-col>
    </el-row>
    <template>
      <el-tabs class="marT" type="border-card" v-model="caName" >
        <el-tab-pane v-if="ruleForm.periodDatas" label="阶段点评审" name="0">
          <div class="supplement-table bgColor marT" style="position: relative;">          
            <el-row>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form :model="ruleForm" :rules="ruleForm.rules" ref="ruleForm">
                  <el-table
                    :header-cell-style="{background:'#eef1f6'}"
                    :data="ruleForm.periodDatas"                        
                    style="width: 100%">
                      <el-table-column
                            label="阶段点评审"
                            align="center"> 
                            <el-table-column
                              label="考核项"
                              align="center"
                              prop="type">
                            </el-table-column>

                            <el-table-column
                              label="目标"
                              align="center"
                              prop="target">  
                            </el-table-column> 

                            <el-table-column
                            label="审计结果"
                            align="center"
                            class="tablePad"
                            >   
                            <el-table-column
                              label=""
                              align="center"
                              width="200"
                              >
                              <template slot-scope="scope">
                                <div v-if="reviewSub[scope.row.name]">
                                  <div :key="item" v-for="(item, index) in reviewSub[scope.row.name]">
                                    <div :class="{'borders': index !== reviewSub[scope.row.name].length - 1}">{{ item }}</div>
                                  </div>
                                </div>                          
                              </template>  
                            </el-table-column> 
                            <el-table-column
                              label=""
                              align="center"
                              >
                              <template slot-scope="scope">
                                  <div class="borders">
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'periodDatas.' + scope.$index + '.molecule'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.molecule" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.molecule }}</span>
                                  </div>
                                  <div>
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'periodDatas.' + scope.$index + '.denominator'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.denominator" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.denominator }}</span>
                                  </div>
                                
                              </template>     
                            </el-table-column>   
                          </el-table-column>

                            <el-table-column
                              label="符合度"
                              align="center"
                              prop="conformity">     
                            </el-table-column> 

                            <el-table-column
                              label="备注"
                              align="center">
                              <template slot-scope="scope">
                                <el-input
                                  v-if="scope.row.status"
                                  type="textarea"
                                  placeholder="请输入内容"             
                                  v-model="scope.row.comments" 
                                  autocomplete="off"
                                  maxlength="50"
                                  show-word-limit
                                  >
                                </el-input>
                              
                                <span v-else>{{ scope.row.comments }}</span>
                              </template>      
                            </el-table-column>  
                          </el-table-column>

                          <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                              <div style="margin-bottom: 5px;">
                                <el-button @click="change(scope.row, scope.$index, 'period')" size="mini" round type="success">修改</el-button>
                              </div>

                              <div v-if="scope.row.status" style="margin-bottom: 5px;">
                                <el-button @click="cancel(scope.row, scope.$index, 'period')" size="mini" round type="warning">取消</el-button>
                              </div>

                              <div>
                                <el-button @click="save(scope.row, scope.$index, 'period')" size="mini" round type="primary" :disabled="error || !scope.row.status">保存</el-button>
                              </div>
                            </template> 
                          </el-table-column>
                  </el-table>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="ruleForm.requestDatas" label="需求" name="1">
          <div class="supplement-table bgColor marT" style="position: relative;">          
            <el-row>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form :model="ruleForm" :rules="ruleForm.rules" ref="ruleForm">
                  <el-table
                    :header-cell-style="{background:'#eef1f6'}"
                    :data="ruleForm.requestDatas"                        
                    style="width: 100%">
                      <el-table-column
                            label="Bug处理"
                            align="center"> 
                            <el-table-column
                              label="考核项"
                              align="center"
                              prop="type">
                            </el-table-column>

                            <el-table-column
                              label="目标"
                              align="center"
                              prop="target">  
                            </el-table-column> 

                            <el-table-column
                            label="审计结果"
                            align="center"
                            class="tablePad"
                            >   
                            <el-table-column
                              label=""
                              align="center"
                              width="200"
                              >
                              <template slot-scope="scope">
                                <div v-if="reviewSub[scope.row.name]">
                                  <div :key="item" v-for="(item, index) in reviewSub[scope.row.name]">
                                    <div :class="{'borders': index !== reviewSub[scope.row.name].length - 1}">{{ item }}</div>
                                  </div>
                                </div>                          
                              </template>  
                            </el-table-column> 
                            <el-table-column
                              label=""
                              align="center"
                              >
                              <template slot-scope="scope">
                                  <div class="borders">
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'requestDatas.' + scope.$index + '.molecule'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.molecule" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.molecule }}</span>
                                  </div>
                                  <div>
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'requestDatas.' + scope.$index + '.denominator'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.denominator" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.denominator }}</span>
                                  </div>
                                
                              </template>     
                            </el-table-column>   
                          </el-table-column>

                            <el-table-column
                              label="符合度"
                              align="center"
                              prop="conformity">     
                            </el-table-column> 

                            <el-table-column
                              label="备注"
                              align="center">
                              <template slot-scope="scope">
                                <el-input
                                  v-if="scope.row.status"
                                  type="textarea"
                                  placeholder="请输入内容"             
                                  v-model="scope.row.comments" 
                                  autocomplete="off"
                                  maxlength="50"
                                  show-word-limit
                                  >
                                </el-input>
                              
                                <span v-else>{{ scope.row.comments }}</span>
                              </template>      
                            </el-table-column>  
                          </el-table-column>

                          <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                              <div style="margin-bottom: 5px;">
                                <el-button @click="change(scope.row, scope.$index, 'request')" size="mini" round type="success">修改</el-button>
                              </div>

                              <div v-if="scope.row.status" style="margin-bottom: 5px;">
                                <el-button @click="cancel(scope.row, scope.$index, 'request')" size="mini" round type="warning">取消</el-button>
                              </div>

                              <div>
                                <el-button @click="save(scope.row, scope.$index, 'request')" size="mini" round type="primary" :disabled="error || !scope.row.status">保存</el-button>
                              </div>
                            </template> 
                          </el-table-column>
                  </el-table>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="ruleForm.designDatas" label="设计" name="2">
          <div class="supplement-table bgColor marT" style="position: relative;">          
            <el-row>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form :model="ruleForm" :rules="ruleForm.rules" ref="ruleForm">
                  <el-table
                    :header-cell-style="{background:'#eef1f6'}"
                    :data="ruleForm.designDatas"                        
                    style="width: 100%">
                      <el-table-column
                            label="Bug处理"
                            align="center"> 
                            <el-table-column
                              label="考核项"
                              align="center"
                              prop="type">
                            </el-table-column>

                            <el-table-column
                              label="目标"
                              align="center"
                              prop="target">  
                            </el-table-column> 

                            <el-table-column
                            label="审计结果"
                            align="center"
                            class="tablePad"
                            >   
                            <el-table-column
                              label=""
                              align="center"
                              width="200"
                              >
                              <template slot-scope="scope">
                                <div v-if="reviewSub[scope.row.name]">
                                  <div :key="item" v-for="(item, index) in reviewSub[scope.row.name]">
                                    <div :class="{'borders': index !== reviewSub[scope.row.name].length - 1}">{{ item }}</div>
                                  </div>
                                </div>                          
                              </template>  
                            </el-table-column> 
                            <el-table-column
                              label=""
                              align="center"
                              >
                              <template slot-scope="scope">
                                  <div class="borders">
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'designDatas.' + scope.$index + '.molecule'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.molecule" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.molecule }}</span>
                                  </div>
                                  <div>
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'designDatas.' + scope.$index + '.denominator'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.denominator" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.denominator }}</span>
                                  </div>
                                
                              </template>     
                            </el-table-column>   
                          </el-table-column>

                            <el-table-column
                              label="符合度"
                              align="center"
                              prop="conformity">     
                            </el-table-column> 

                            <el-table-column
                              label="备注"
                              align="center">
                              <template slot-scope="scope">
                                <el-input
                                  v-if="scope.row.status"
                                  type="textarea"
                                  placeholder="请输入内容"             
                                  v-model="scope.row.comments" 
                                  autocomplete="off"
                                  maxlength="50"
                                  show-word-limit
                                  >
                                </el-input>
                              
                                <span v-else>{{ scope.row.comments }}</span>
                              </template>      
                            </el-table-column>  
                          </el-table-column>

                          <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                              <div style="margin-bottom: 5px;">
                                <el-button @click="change(scope.row, scope.$index, 'design')" size="mini" round type="success">修改</el-button>
                              </div>

                              <div v-if="scope.row.status" style="margin-bottom: 5px;">
                                <el-button @click="cancel(scope.row, scope.$index, 'design')" size="mini" round type="warning">取消</el-button>
                              </div>

                              <div>
                                <el-button @click="save(scope.row, scope.$index, 'design')" size="mini" round type="primary" :disabled="error || !scope.row.status">保存</el-button>
                              </div>
                            </template> 
                          </el-table-column>
                  </el-table>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="ruleForm.codeDatas" label="编码" name="3">
          <div class="supplement-table bgColor marT" style="position: relative;">          
            <el-row>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form :model="ruleForm" :rules="ruleForm.rules" ref="ruleForm">
                  <el-table
                    :header-cell-style="{background:'#eef1f6'}"
                    :data="ruleForm.codeDatas"                        
                    style="width: 100%">
                      <el-table-column
                            label="Bug处理"
                            align="center"> 
                            <el-table-column
                              label="考核项"
                              align="center"
                              prop="type">
                            </el-table-column>

                            <el-table-column
                              label="目标"
                              align="center"
                              prop="target">  
                            </el-table-column> 

                            <el-table-column
                            label="审计结果"
                            align="center"
                            class="tablePad"
                            >   
                            <el-table-column
                              label=""
                              align="center"
                              width="200"
                              >
                              <template slot-scope="scope">
                                <div v-if="reviewSub[scope.row.name]">
                                  <div :key="item" v-for="(item, index) in reviewSub[scope.row.name]">
                                    <div :class="{'borders': index !== reviewSub[scope.row.name].length - 1}">{{ item }}</div>
                                  </div>
                                </div>                          
                              </template>  
                            </el-table-column> 
                            <el-table-column
                              label=""
                              align="center"
                              >
                              <template slot-scope="scope">
                                  <div class="borders">
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'codeDatas.' + scope.$index + '.molecule'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.molecule" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.molecule }}</span>
                                  </div>
                                  <div>
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'codeDatas.' + scope.$index + '.denominator'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.denominator" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.denominator }}</span>
                                  </div>
                                
                              </template>     
                            </el-table-column>   
                          </el-table-column>

                            <el-table-column
                              label="符合度"
                              align="center"
                              prop="conformity">     
                            </el-table-column> 

                            <el-table-column
                              label="备注"
                              align="center">
                              <template slot-scope="scope">
                                <el-input
                                  v-if="scope.row.status"
                                  type="textarea"
                                  placeholder="请输入内容"             
                                  v-model="scope.row.comments" 
                                  autocomplete="off"
                                  maxlength="50"
                                  show-word-limit
                                  >
                                </el-input>
                              
                                <span v-else>{{ scope.row.comments }}</span>
                              </template>      
                            </el-table-column>  
                          </el-table-column>

                          <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                              <div style="margin-bottom: 5px;">
                                <el-button @click="change(scope.row, scope.$index, 'code')" size="mini" round type="success">修改</el-button>
                              </div>

                              <div v-if="scope.row.status" style="margin-bottom: 5px;">
                                <el-button @click="cancel(scope.row, scope.$index, 'code')" size="mini" round type="warning">取消</el-button>
                              </div>

                              <div>
                                <el-button @click="save(scope.row, scope.$index, 'code')" size="mini" round type="primary" :disabled="error || !scope.row.status">保存</el-button>
                              </div>
                            </template> 
                          </el-table-column>
                  </el-table>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="ruleForm.testDatas" label="测试" name="4">
          <div class="supplement-table bgColor marT" style="position: relative;">          
            <el-row>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form :model="ruleForm" :rules="ruleForm.rules" ref="ruleForm">
                  <el-table
                    :header-cell-style="{background:'#eef1f6'}"
                    :data="ruleForm.testDatas"                        
                    style="width: 100%">
                      <el-table-column
                            label="Bug处理"
                            align="center"> 
                            <el-table-column
                              label="考核项"
                              align="center"
                              prop="type">
                            </el-table-column>

                            <el-table-column
                              label="目标"
                              align="center"
                              prop="target">  
                            </el-table-column> 

                            <el-table-column
                            label="审计结果"
                            align="center"
                            class="tablePad"
                            >   
                            <el-table-column
                              label=""
                              align="center"
                              width="200"
                              >
                              <template slot-scope="scope">
                                <div v-if="reviewSub[scope.row.name]">
                                  <div :key="item" v-for="(item, index) in reviewSub[scope.row.name]">
                                    <div :class="{'borders': index !== reviewSub[scope.row.name].length - 1}">{{ item }}</div>
                                  </div>
                                </div>                          
                              </template>  
                            </el-table-column> 
                            <el-table-column
                              label=""
                              align="center"
                              >
                              <template slot-scope="scope">
                                  <div class="borders">
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'testDatas.' + scope.$index + '.molecule'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.molecule" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.molecule }}</span>
                                  </div>
                                  <div>
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'testDatas.' + scope.$index + '.denominator'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.denominator" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.denominator }}</span>
                                  </div>
                                
                              </template>     
                            </el-table-column>   
                          </el-table-column>

                            <el-table-column
                              label="符合度"
                              align="center"
                              prop="conformity">     
                            </el-table-column> 

                            <el-table-column
                              label="备注"
                              align="center">
                              <template slot-scope="scope">
                                <el-input
                                  v-if="scope.row.status"
                                  type="textarea"
                                  placeholder="请输入内容"             
                                  v-model="scope.row.comments" 
                                  autocomplete="off"
                                  maxlength="50"
                                  show-word-limit
                                  >
                                </el-input>
                              
                                <span v-else>{{ scope.row.comments }}</span>
                              </template>      
                            </el-table-column>  
                          </el-table-column>

                          <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                              <div style="margin-bottom: 5px;">
                                <el-button @click="change(scope.row, scope.$index, 'test')" size="mini" round type="success">修改</el-button>
                              </div>

                              <div v-if="scope.row.status" style="margin-bottom: 5px;">
                                <el-button @click="cancel(scope.row, scope.$index, 'test')" size="mini" round type="warning">取消</el-button>
                              </div>

                              <div>
                                <el-button @click="save(scope.row, scope.$index, 'test')" size="mini" round type="primary" :disabled="error || !scope.row.status">保存</el-button>
                              </div>
                            </template> 
                          </el-table-column>
                  </el-table>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="ruleForm.bugDatas" label="Bug处理" name="5">
          <div class="supplement-table bgColor marT" style="position: relative;">          
            <el-row>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form :model="ruleForm" :rules="ruleForm.rules" ref="ruleForm">
                  <el-table
                    :header-cell-style="{background:'#eef1f6'}"
                    :data="ruleForm.bugDatas"                        
                    style="width: 100%">
                      <el-table-column
                            label="Bug处理"
                            align="center"> 
                            <el-table-column
                              label="考核项"
                              align="center"
                              prop="type">
                            </el-table-column>

                            <el-table-column
                              label="目标"
                              align="center"
                              prop="target">  
                            </el-table-column> 

                            <el-table-column
                            label="审计结果"
                            align="center"
                            class="tablePad"
                            >   
                            <el-table-column
                              label=""
                              align="center"
                              width="200"
                              >
                              <template slot-scope="scope">
                                <div v-if="reviewSub[scope.row.name]">
                                  <div :key="item" v-for="(item, index) in reviewSub[scope.row.name]">
                                    <div :class="{'borders': index !== reviewSub[scope.row.name].length - 1}">{{ item }}</div>
                                  </div>
                                </div>                          
                              </template>  
                            </el-table-column> 
                            <el-table-column
                              label=""
                              align="center"
                              >
                              <template slot-scope="scope">
                                <div v-if="reviewSub[scope.row.name].length == 2">
                                  <div class="borders">
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'bugDatas.' + scope.$index + '.molecule'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.molecule" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.molecule }}</span>
                                  </div>
                                  <div>
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'bugDatas.' + scope.$index + '.denominator'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.denominator" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.denominator }}</span>
                                  </div>
                                </div>
                                <div v-else>
                                  <el-form-item
                                    v-if="scope.row.status"
                                    :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                    :prop="'bugDatas.' + scope.$index + '.value'"
                                    :rules="ruleForm.rules.float">
                                    <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                    <el-input  v-model="scope.row.value" autocomplete="off"></el-input>
                                  </el-form-item>
                                  <span v-else>{{ scope.row.value }}</span>
                                </div>
                              </template>    
                            </el-table-column>   
                          </el-table-column>

                            <el-table-column
                              label="符合度"
                              align="center"
                              prop="conformity">     
                            </el-table-column> 

                            <el-table-column
                              label="备注"
                              align="center">
                              <template slot-scope="scope">
                                <el-input
                                  v-if="scope.row.status"
                                  type="textarea"
                                  placeholder="请输入内容"             
                                  v-model="scope.row.comments" 
                                  autocomplete="off"
                                  maxlength="50"
                                  show-word-limit
                                  >
                                </el-input>
                              
                                <span v-else>{{ scope.row.comments }}</span>
                              </template>      
                            </el-table-column>  
                          </el-table-column>

                          <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                              <div style="margin-bottom: 5px;">
                                <el-button @click="change(scope.row, scope.$index, 'bug')" size="mini" round type="success">修改</el-button>
                              </div>

                              <div v-if="scope.row.status" style="margin-bottom: 5px;">
                                <el-button @click="cancel(scope.row, scope.$index, 'bug')" size="mini" round type="warning">取消</el-button>
                              </div>

                              <div>
                                <el-button @click="save(scope.row, scope.$index, 'bug')" size="mini" round type="primary" :disabled="error || !scope.row.status">保存</el-button>
                              </div>
                            </template> 
                          </el-table-column>
                  </el-table>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="ruleForm.releaseDatas" label="版本release" name="6">
          <div class="supplement-table bgColor marT" style="position: relative;">          
            <el-row>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form :model="ruleForm" :rules="ruleForm.rules" ref="ruleForm">
                  <el-table
                    :header-cell-style="{background:'#eef1f6'}"
                    :data="ruleForm.releaseDatas"                        
                    style="width: 100%">
                      <el-table-column
                            label="Bug处理"
                            align="center"> 
                            <el-table-column
                              label="考核项"
                              align="center"
                              prop="type">
                            </el-table-column>

                            <el-table-column
                              label="目标"
                              align="center"
                              prop="target">  
                            </el-table-column> 

                            <el-table-column
                            label="审计结果"
                            align="center"
                            class="tablePad"
                            >   
                            <el-table-column
                              label=""
                              align="center"
                              width="200"
                              >
                              <template slot-scope="scope">
                                <div v-if="reviewSub[scope.row.name]">
                                  <div :key="item" v-for="(item, index) in reviewSub[scope.row.name]">
                                    <div :class="{'borders': index !== reviewSub[scope.row.name].length - 1}">{{ item }}</div>
                                  </div>
                                </div>                          
                              </template>  
                            </el-table-column> 
                            <el-table-column
                              label=""
                              align="center"
                              >
                              <template slot-scope="scope">
                                <div v-if='!scope.row.hasOwnProperty("value")'>
                                  <div class="borders">
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'releaseDatas.' + scope.$index + '.molecule'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.molecule" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.molecule }}</span>
                                  </div>
                                  <div>
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'releaseDatas.' + scope.$index + '.denominator'"
                                      :rules="ruleForm.rules.number">
                                      <!-- scope.row.selectStatus == '是' ? false : true || scope.row.audit_result[item].is_disabled -->
                                      <el-input  v-model="scope.row.denominator" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.denominator }}</span>
                                  </div>
                                </div>
                                <div v-else>
                                  <el-form-item
                                    v-if="scope.row.status"
                                    :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'"
                                    :prop="'releaseDatas.' + scope.$index + '.value'"
                                    :rules="ruleForm.rules.number">
                                    <el-input  v-model="scope.row.value" autocomplete="off"></el-input>
                                  </el-form-item>
                                  <span v-else>{{ scope.row.value }}</span>
                                </div>
                                
                              </template>     
                            </el-table-column>   
                          </el-table-column>

                            <el-table-column
                              label="符合度"
                              align="center"
                              prop="conformity">     
                            </el-table-column> 

                            <el-table-column
                              label="备注"
                              align="center">
                              <template slot-scope="scope">
                                <el-input
                                  v-if="scope.row.status"
                                  type="textarea"
                                  placeholder="请输入内容"             
                                  v-model="scope.row.comments" 
                                  autocomplete="off"
                                  maxlength="50"
                                  show-word-limit
                                  >
                                </el-input>
                              
                                <span v-else>{{ scope.row.comments }}</span>
                              </template>      
                            </el-table-column>  
                          </el-table-column>

                          <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                              <div style="margin-bottom: 5px;">
                                <el-button @click="change(scope.row, scope.$index, 'release')" size="mini" round type="success">修改</el-button>
                              </div>

                              <div v-if="scope.row.status" style="margin-bottom: 5px;">
                                <el-button @click="cancel(scope.row, scope.$index, 'release')" size="mini" round type="warning">取消</el-button>
                              </div>

                              <div>
                                <el-button @click="save(scope.row, scope.$index, 'release')" size="mini" round type="primary" :disabled="error || !scope.row.status">保存</el-button>
                              </div>
                            </template> 
                          </el-table-column>
                  </el-table>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="ruleForm.complainDatas" label="客户投诉" name="7">
          <div class="supplement-table bgColor marT" style="position: relative;">          
            <el-row>
              <el-col :xs="24" :sm="24" :lg="24">
                <el-form :model="ruleForm" :rules="ruleForm.rules" ref="ruleForm">
                  <el-table
                    :header-cell-style="{background:'#eef1f6'}"
                    :data="ruleForm.complainDatas"                        
                    style="width: 100%">
                      <el-table-column
                            label="客户投诉"
                            align="center"> 
                            <el-table-column
                              label="考核项"
                              align="center"
                              prop="type">
                            </el-table-column>

                            <el-table-column
                              label="目标"
                              align="center"
                              prop="target">  
                            </el-table-column> 

                          <el-table-column
                            label="审计结果"
                            align="center"
                            class="tablePad"
                            >   
                            <el-table-column
                              label=""
                              align="center"
                              width="200"
                              >
                              <template slot-scope="scope">
                                <div v-if="reviewSub[scope.row.name]">
                                  <div :key="item" v-for="(item, index) in reviewSub[scope.row.name]">
                                    <div :class="{'borders': index !== reviewSub[scope.row.name].length - 1}">{{ item }}</div>
                                  </div>
                                </div>
                              </template>
                            </el-table-column>
                            <el-table-column
                              label=""
                              align="center"
                              >
                              <template slot-scope="scope">
                                  <div>
                                    <el-form-item 
                                      v-if="scope.row.status"
                                      :style="error ? 'marginBottom: 30px' : 'marginBottom: 0'" 
                                      :prop="'complainDatas.' + scope.$index + '.value'"
                                      :rules="ruleForm.rules.number">
                                      <el-input  v-model="scope.row.value" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <span v-else>{{ scope.row.value }}</span>
                                  </div>
                                
                              </template>     
                            </el-table-column>   
                          </el-table-column>
                            <!-- <el-table-column
                              label="审计结果"
                              align="center"
                              :rules="ruleForm.rules.number">
                              <template slot-scope="scope">
                                <el-input
                                  v-if="scope.row.status"
                                  v-model="scope.row.value" 
                                  autocomplete="off"
                                  >
                                </el-input>
                              
                                <span v-else>{{ scope.row.value }}</span>
                              </template>      
                            </el-table-column>  -->

                            <el-table-column
                              label="符合度"
                              align="center"
                              prop="conformity">     
                            </el-table-column> 

                            <el-table-column
                              label="备注"
                              align="center">
                              <template slot-scope="scope">
                                <el-input
                                  v-if="scope.row.status"
                                  type="textarea"
                                  placeholder="请输入内容"             
                                  v-model="scope.row.comments" 
                                  autocomplete="off"
                                  maxlength="50"
                                  show-word-limit
                                  >
                                </el-input>
                              
                                <span v-else>{{ scope.row.comments }}</span>
                              </template>      
                            </el-table-column>  
                          </el-table-column>

                          <el-table-column align="center" label="操作">
                            <template slot-scope="scope" style="padding: 5px;">
                              <div style="margin-bottom: 5px;">
                                <el-button @click="change(scope.row, scope.$index, 'complain')" size="mini" round type="success">修改</el-button>
                              </div>

                              <div v-if="scope.row.status" style="margin-bottom: 5px;">
                                <el-button @click="cancel(scope.row, scope.$index, 'complain')" size="mini" round type="warning">取消</el-button>
                              </div>

                              <div style="margin-bottom: 5px;">
                                <el-button @click="save(scope.row, scope.$index, 'complain')" size="mini" round type="primary" :disabled="error || !scope.row.status">保存</el-button>
                              </div>
                            </template> 
                          </el-table-column>
                  </el-table>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>

  </div>
</template>

<script>
import DataChoose from '@/views/data/dataChoose'
import { getHeader } from '@/app.config'
import { mapState } from 'vuex'
import { Loading } from 'element-ui'

export default {
  components: {
    DataChoose
  },
  computed: {
    ...mapState({
        dataChoose: state => state.dataChoose,
        entry: state => state.entry
    })
  },
  created() {   

  },
  watch: {
    dataChoose: {
      handler: function() {
        this.$nextTick(() => {        
          if(this.dataChoose.projectId) {
            console.log(this.dataChoose.projectId)
            this.initData()
          }
        })
      },
      deep: true
    }
  },
  data() {
    var validatePercent = (rule, value, callback) => {
      if (!(/^(\d{1,2}(\.\d{1,5})?|100)$/).test(value)) {
        this.error = true
        callback(new Error('请输入正确的百分数'));
      } else {
        this.error = false
        callback()
      }
    };
    var validateNum = (rule, value, callback) => {
      if(!(/^([1-9]\d*|[0]{1,1})$/).test(value)) {
        this.error = true
        callback(new Error('请输入正整数!'));
      } else {
        this.error = false
        callback()
      }
    };
    var validateFloat = (rule, value, callback) => {
      if(!(/^[0-9]*([.][0-9]+)?$/).test(value)) {
        this.error = true
        callback(new Error('请输入正整数或小数!'));
      } else {
        this.error = false
        callback()
      }
    };
    var validateStr = (rule, value, callback) => {
      if(!(/(^$)|^([1-9]\d*|[0]{1,1})$/).test(value)) {
        this.error = true
        callback(new Error('请输入正整数!'));
      } else {
        this.error = false
        callback()
      }
    };
    var validatePercentStr = (rule, value, callback) => {
      if (!(/(^$)|^(\d{1,2}(\.\d{1,5})?|100)$/).test(value)) {
        this.error = true
        callback(new Error('请输入正确的百分数'));
      } else {
        this.error = false
        callback()
      }
    };
    return { 
      error: false,
      dialogVisible: false,
      log: [],
      yearStatus: 'now',
      logCurrent: 1,
      logSize: 10,
      logTotal: 0,
      sys1: '是',
      sys2: '是',
      sys3: '是',
      caName: '0',
      success: false,
      newSuccess: false,
      ruleForm: {
        periodDatas: [], //阶段点评审
        requestDatas: [], //需求
        designDatas: [], //设计
        testDatas: [], //测试
        codeDatas: [], //编码
        bugDatas: [], //Bug处理
        releaseDatas: [], //版本release
        complainDatas: [], //客户投诉
        rules: {
          pass: [
            { validator: validatePercent, trigger: 'change' }
          ],
          number: [
            { validator: validateNum, trigger: 'change' }
          ],
          float: [
            { validator: validateFloat, trigger: 'change' }
          ],
          str: [
            { validator: validateStr, trigger: 'change' }
          ],
          percentStr: [
            { validator: validatePercentStr, trigger: 'change' }
          ]
        }
      },
      reviewSub: {
        'period_review_pass_rate': ['首次评审通过次数','首次评审数'],
        'period_question_close_rate': ['评审发现问题闭环数','评审问题数'],
        'period_days_delay': ['现阶段计划完成时间','实际完成时间'],
        'require_basic_rate': ['已基线需求数','总发布目标需求数'],
        'require_change_rate': ['需求变更数','已基线需求数'],
        'design_review_defect_rate': ['设计评审缺陷数','设计书页数'],
        'design_cover_rate': ['Feature设计数','Feature总数'],
        'design_review_cover_rate': ['设计评审数','设计数'],
        'code_review_defect_rate': ['inlinecomments数','代码千行数'],
        'test_case_cover_require_rate': ['测试用例覆盖需求数','总需求数'],
        'test_case_execute_rate': ['执行用例数','已实现的用例数'],
        'test_case_pass_rate': ['通过的用例数','执行用例数'],
        'bug_procedure_conformity': ['流程checklist中OK的个数','检查总数'],
        'critical_bug_close_rate': ['Blocker、critical Bug关闭数','Blocker、critical Bug总数'],
        'bug_lifetime': ['高优先级bug平均生存周期（天）'],
        'require_defect_leakage_rate': ['需求原因导致的bug数','总bug数-无效bug数'],
        'design_defect_leakage_rate': ['设计原因导致的bug数','总bug数-无效bug数'],
        'code_introduced_defect_density': ['代码引入缺陷数','总代码千行数'],
        'bug_reopen_rate': ['bug reopen数','总bug数'],
        'invalid_bug_rate': ['标记为无效bug数','总bug数'],
        'import_demand_defect_rate': ['需求原因导致的Bug数','总Bug数 - 无效Bug数'],
        'import_design_defect_rate': ['设计原因导致的Bug数','总Bug数 - 无效Bug数'],
        'test_missed_rate': ['客户提交的Bug数（由客户负责的专项测试发现的Bug除外）','总Bug数'],
        'downgrade_rate': ['降级Bug数','分子分母同一测试范围内的Bug数'],
        'invalid_release_rate': ['标记为无效版本数','已发布版本数'],
        'delayed_release_days': ['对外发布责任延期天数'],
        'customer_complaint_count': ['客户投诉次数']
      }
    }
  },
  methods: {
    formatter(num) {
      num ? `${(num * 100).toFixed(2)}%` : '0.00%'
      return num
    },
    tableRowClassName({row, rowIndex}) {
      if(row.selectStatus == '否') {
        return 'disabled-row';
      }
    },
    isDisabled(status, disabled) {
      let statusBool, isDisabledStatus
      status == "是" ? statusBool = false : statusBool = true

      if(disabled == true) {
        return isDisabledStatus = true
      } else {
        if(!statusBool) {
          isDisabledStatus = false
        } else {
          isDisabledStatus = true
        }
        return isDisabledStatus
      }
    },
    logCurrentChange(val) {
      this.logCurrent = val
    },
    logSizeChange(val) {
      this.logSize = val
    },
    reload() {
      this.initData()
    },
    changeTg(type, index, row) {      
      this.$set(this.ruleForm[type], index, row)
    },
    save(row, index, type) {
      let obj = {}
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          obj['project_id'] = this.dataChoose.projectId
          
          obj[row.name] = {}
          if(row.molecule) {
            obj[row.name]['molecule'] = parseInt(row.molecule)
            obj[row.name]['denominator'] = parseInt(row.denominator)
          }
          if(row.value) {
            obj[row.name]['value'] = row.value
          }
          
          obj[row.name]['comments'] = row.comments
          console.log(obj)
          this.submit(obj)
          
          row.status = false
          switch(type) {
            case 'period':
              this.$set(this.ruleForm.periodDatas, index, row)
              break
            case 'bug':
              this.$set(this.ruleForm.bugDatas, index, row)
              break
            case 'request':
              this.$set(this.ruleForm.requestDatas, index, row)
              break
            case 'design':
              this.$set(this.ruleForm.designDatas, index, row)
              break
            case 'test':
              this.$set(this.ruleForm.testDatas, index, row)
              break
            case 'code':
              this.$set(this.ruleForm.codeDatas, index, row)
              break
            case 'release':
              this.$set(this.ruleForm.releaseDatas, index, row)
              break
            case 'complain':
              this.$set(this.ruleForm.complainDatas, index, row)
              break
          }
              
        } else {
          this.$message({
            showClose: true,
            message: '提交错误!',
            type: 'error'
          })
          return false
        }
      })
    },
    cancel(row, index, type) {
      row.status = false
       switch(type) {
          case 'period':
            this.$set(this.ruleForm.periodDatas, index, row)
            break
          case 'bug':
            this.$set(this.ruleForm.bugDatas, index, row)
            break
          case 'request':
            this.$set(this.ruleForm.requestDatas, index, row)
            break
          case 'design':
            this.$set(this.ruleForm.designDatas, index, row)
            break
          case 'test':
            this.$set(this.ruleForm.testDatas, index, row)
            break
          case 'code':
            this.$set(this.ruleForm.codeDatas, index, row)
            break
          case 'release':
            this.$set(this.ruleForm.releaseDatas, index, row)
            break
          case 'complain':
            this.$set(this.ruleForm.complainDatas, index, row)
            break
        }
      this.reload()
    },
    change(row, index, type) {
      row.status = true
       switch(type) {
        case 'period':
          this.$set(this.ruleForm.periodDatas, index, row)
          break
        case 'bug':
          this.$set(this.ruleForm.bugDatas, index, row)
          break
        case 'request':
          this.$set(this.ruleForm.requestDatas, index, row)
          break
        case 'design':
          this.$set(this.ruleForm.designDatas, index, row)
          break
        case 'test':
          this.$set(this.ruleForm.testDatas, index, row)
          break
        case 'code':
          this.$set(this.ruleForm.codeDatas, index, row)
          break
        case 'release':
          this.$set(this.ruleForm.releaseDatas, index, row)
          break
        case 'complain':
          this.$set(this.ruleForm.complainDatas, index, row)
          break
      }
    },
    look() {
      this.dialogVisible = true
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/examine/entry/record?projectId=${this.dataChoose.projectId}&month=${this.dataChoose.time}`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.log = res.data.data
            this.logTotal = this.log.length
            this.logCurrent = 1
          }
        }
      })
    },
    initData() {
      let loadingInstance = Loading.service({ fullscreen: true, text: '加载中,请稍后...' });
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/project/customize/kanban?project_id=${this.dataChoose.projectId}`, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          loadingInstance.close()
          if(res.data.code === 200) {
            this.ruleForm.periodDatas = res.data.data['阶段点评审']
            this.ruleForm.bugDatas = res.data.data['Bug处理']
            this.ruleForm.requestDatas = res.data.data['需求']
            this.ruleForm.designDatas = res.data.data['设计']
            this.ruleForm.testDatas = res.data.data['测试']
            this.ruleForm.codeDatas = res.data.data['编码']
            this.ruleForm.releaseDatas = res.data.data['版本release']
            this.ruleForm.complainDatas = res.data.data['客户投诉']
            if(this.ruleForm.periodDatas) {
              this.ruleForm.periodDatas.forEach(val => {
                val.status = false
                if(!val.selectStatus) {
                  val.selectStatus = ''
                }
              })
            }
            if(this.ruleForm.bugDatas) {
              this.ruleForm.bugDatas.forEach(val => {
                val.status = false
                if(!val.selectStatus) {
                  val.selectStatus = ''
                }
              })
            }
            if(this.ruleForm.requestDatas) {
              this.ruleForm.requestDatas.forEach(val => {
                val.status = false
                if(!val.selectStatus) {
                  val.selectStatus = ''
                }
              })
            }
            if(this.ruleForm.designDatas) {
              this.ruleForm.designDatas.forEach(val => {
                val.status = false
                if(!val.selectStatus) {
                  val.selectStatus = ''
                }
              })
            }
            if(this.ruleForm.testDatas) {
              this.ruleForm.testDatas.forEach(val => {
                val.status = false
                if(!val.selectStatus) {
                  val.selectStatus = ''
                }
              })
            }
            if(this.ruleForm.codeDatas) {
              this.ruleForm.codeDatas.forEach(val => {
                val.status = false
                if(!val.selectStatus) {
                  val.selectStatus = ''
                }
              })
            }
            if(this.ruleForm.releaseDatas) {
              this.ruleForm.releaseDatas.forEach(val => {
                val.status = false
                if(!val.selectStatus) {
                  val.selectStatus = ''
                }
              })
            }
            if(this.ruleForm.complainDatas) {
              this.ruleForm.complainDatas.forEach(val => {
                val.status = false
                if(!val.selectStatus) {
                  val.selectStatus = ''
                }
              })
            }     
          }
        }
      })
    },
    submit(data) {
      this.$axios.post(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/project/customize/kanban`, data, {headers: getHeader()})
      .then(res => {
        if(res.status === 200) {
          if(res.data.code === 200) {
            this.success = true
            this.$message({
              showClose: true,
              message: '录入成功!',
              type: 'success'
            })
            if(this.success) {
              this.reload()
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'error'
            })
          }
        }
      }).finally(() => {
        this.success = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../../assets/common/common.scss';
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  /deep/ .disabled-row{
    background: #F5F7FA;
  }
  #projectWrapper{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  }
  #projectWrapper >>> .el-table .cell{
    padding: 0;
  }
  #projectWrapper >>> .el-table--medium td{
    padding: 0;
  }
  #point >>>  .el-table--medium td, #improve >>>  .el-table--medium td, #newimprove >>>  .el-table--medium td{
    padding: 10px 0;
  }
  .red{
    color: #F56C6C;
  }
  .log{
    position: relative;
    top: -39px;
    left: -20px;   
    float: right;
  }
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .borders{
    border-bottom: 1px solid #dfe6ec;
  }
  
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;
  }
  .bgColor{
      background: #fff;
  }
  .pad{
      padding: 0 20px;
      padding-top: 20px;
  }
  .marT{
      margin-top: 20px;
  }
</style>